<!-- 模糊查询页面  马佳乐 -->
<template>
    <div class="div1">
        <div class="div111"></div>
        <div class="div1-2">
            <div class="div1-2-1">
                <span class="span1">首页 > </span>
                <span class="span2">搜索结果</span>
            </div>
        </div>
        <div class="div2">
            <div class="div2-2">
                <span class="span3">共有</span>
                <span>{{ totalCourse }}</span>
                <span class="span3">门包含</span>
                <span>" {{ searchValue }} "</span>
                <span class="span3">的课程</span>
            </div>
            <div class="div333" >
                <div class="div3"  v-for="(item, index) in searchQueryList" :key="index"  @click="handlesearchQueryClick(item)"  >
                    <div class="div3-1">
                        <img :src="
                    'http://101.43.223.224:8765/image/getImageById?id=' +
                    item.courseImg
                  " class="img1">
                    </div>
                    <div style="height: 3%"></div>
                    <span class="span11">{{ item.courseTitle }}</span>
                    <br>
                    <div style="height: 8%"></div>
                    <span v-if="item.payType === 0" class="span88"
                  >免费</span
                >
                <span v-if="item.payType === 1" class="span88"
                  >￥{{ item .coursePrice }}</span
                >
                </div>
            </div>

            <div class="div444"></div>
        </div>
    </div>
</template>

<script>
// 引用全局登录组件
import { EventBus } from '@/main'
export default {
  // 修复template标签报错
  name: 'CarsharingRegister',
  data () {
    return {
      totalCourse: 0,
      searchValue: '',
      searchQueryList: [],
      loginId: '',
      userInfo: {}
    }
  },
  created () {
    const { searchValue, tiaoId } = this.$route.query
    this.searchCourse(searchValue, tiaoId)
    if (tiaoId !== null && tiaoId !== undefined && tiaoId !== '') {
      this.searchDict(tiaoId)
    }
    // 获取用户存储的信息
    this.userInfo = JSON.parse(localStorage.getItem('user'))
    if (this.userInfo) {
      this.userInfo = this.userInfo.data
      this.loginId = this.userInfo.id
    }
  },
  methods: {
    handlesearchQueryClick (item) {
    // 判断是否登录
      if (this.loginId === null || this.loginId === '') {
        this.$confirm('您还未登录，请问是否登录？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 用户点击了确认按钮，进行登录操作
          EventBus.$emit('showLoginDialog', true)
        }).catch(() => {
          // 用户点击了取消按钮，不进行任何操作
        })
      } else {
        const formData = new FormData()
        formData.append('uid', this.loginId)
        formData.append('cid', item.id)
        this.$axios.post('/Order/selectByTwoId', formData).then((res) => {
          if (item.payType === 0) {
          // 执行跳转页面
            this.$router.push({
              path: '/courseVideo',
              query: {
                roid: JSON.stringify(item)
              }
            })
          } else {
            if (res.data.data === null) {
              // 执行跳转页面
              this.$router.push({
                path: '/purchasecourses',
                query: {
                  roid: JSON.stringify(item)
                }
              })
            } else {
              // 执行跳转页面
              this.$router.push({
                path: '/courseVideo',
                query: {
                  roid: JSON.stringify(item)
                }
              })
            }
          }
        })
      }
    },
    searchDict (tiaoId) {
      this.$axios
        .post('http://127.0.0.1:15000/fuzzyQuery/makeQueryDict?tiaoId=' + tiaoId)
        .then((res) => {
          this.searchValue = res.data.data
        })
    },
    searchCourse (searchValue, tiaoId) {
      if (searchValue) {
        this.makeBackendRequestValue(searchValue)
      }
      if (tiaoId) {
        this.makeBackendRequestTiaoId(tiaoId)
      }
    },
    makeBackendRequestValue (searchValue) {
      this.$axios
        .post('http://127.0.0.1:15000/fuzzyQuery/makeBackendRequestValue?searchValue=' + searchValue)
        .then((res) => {
          this.totalCourse = res.data.data.length
          this.searchValue = searchValue
          this.searchQueryList = res.data.data
        })
    },
    makeBackendRequestTiaoId (tiaoId) {
      this.$axios
        .post('http://127.0.0.1:15000/fuzzyQuery/makeBackendRequestTiaoId?tiaoId=' + tiaoId)
        .then((res) => {
          this.totalCourse = res.data.data.length
          this.searchQueryList = res.data.data
        })
    }
  }
}
</script>

<style scoped>
    .div1{
        width: 100%;
        height: 100%;
        background: rgb(242, 239, 239);
        user-select: none;
    }
    .img1{
        width: 100%;
        height: 100%;
    }
    .span11{
        font-size: 20px;
        padding-left: 10px;
        font-weight: bold;
        /* padding-top: 20px; */
        /* line-height: 20px; */
    }
    .span88{
        float: right;
        padding-right: 7px;
        font-size: 18px;
        color: #ff1d00;
    }
    .div3-1{
        width: 100%;
        height: 52%;
        /* background: red; */
    }
    .div444{
        width: 100%;
        height: 73px;
    }
    .div333{
        width: 100%;
        height: 100%;
        /* background: gray; */
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .div3{
        width: 23%;
        height: 230px;
        background: white;
        text-align: left;
        float: left;
        margin-bottom: 20px;
        margin-right: 10px;
    }
    .span3{
        font-size: 16px;
        line-height: 80px;
        color: #999;
    }
    .div2-2{
        width: 100%;
        height: 80px;
        /* background: yellow; */
        text-align: left;
    }
    .div1-2-1{
        width: 1200px;
        height: 100%;
        margin: 0 auto;
    }
    .span1{
        text-align: left;
        font-size: 14px;
        color: #666;
    }
    .span2{
        text-align: left;
        font-size: 14px;
        color: #999;
    }
    .div1-2{
        width: 100%;
        height: 42px;
        /* background: white; */
        text-align: left;
    }
    .div2{
        width: 1200px;
        height: 100%;
        /* background: green; */
        margin: 0 auto;
        /* display: flex;
        justify-content: space-between; */
    }
    .div111{
        width: 100%;
        height: 80px;
        /* background: white; */
    }
</style>
